<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>复选框选中效果</title>
	<style type="text/css">
	 body{
	     width:400px;
	     margin:0px auto;
	 }
	 table {
	     width: 400px;
	     margin-top: 5px;
	     margin-right: auto;
	     margin-bottom: 0px;
	     margin-left: auto;
	     border-top:1px solid #666666;
	     border-left:1px solid #666666;
	 }
	 td{
	     font-size:12px;
	     line-height:25px;
	     text-align:center;
	     border-right:1px solid #666666;
	     border-bottom:1px solid #666666;
	 }
	</style>
	<script type="text/javascript">
	 //1. 单击全选前的复选框，如果书籍前的复选框没有选中，就将复选框的checked值设为true。
	 //2. 为复选框添加单击事件，全选前复选框单击时调用all_check函数，书籍前的复选框单击时调用single_check函数。
	 //--------------------------在此开始你的代码--------------------------
	 function all_check()
	 {
	     
	 }

	 function single_check()
	 {
	     
	 }
	 //--------------------------在此结束你的代码--------------------------
	</script>
    </head>

    <body>
	<h2>请选择前端设计参考书</h2>
	<table border="0" cellspacing="0" cellpadding="0">
	    <tr style=" font-weight:bold; ">
		<td><input id="all" type="checkbox" value="全选" />全选</td>
		<td>书称</td>
		<td>价格（元）</td>
		<td>数量</td>
	    </tr>
	    <tr>
		<td><input name="ic" type="checkbox" value="诺基亚" /></td>
		<td>JavaScript入门与提高</td>
		<td>39</td>
		<td>6</td>
	    </tr>
	    <tr>
		<td><input name="ic" type="checkbox" value="佳能" /></td>
		<td>JavaScript DOM编程艺术</td>
		<td>29</td>
		<td>5</td>
	    </tr>
	    <tr>
		<td><input name="ic" type="checkbox" value="戴尔"  /></td>
		<td>精通JavaScript与JQuery</td>
		<td>49</td>
		<td>10</td>
	    </tr>
	    <tr>
		<td><input name="ic" type="checkbox" value="联想"  /></td>
		<td>锋利的JQuery</td>
		<td>36</td>
		<td>10</td>
	    </tr>
	    <tr>
		<td><input name="ic" type="checkbox" value="康佳"  /></td>
		<td>JQuery实战</td>
		<td>33</td>
		<td>3</td>
	    </tr>
	    <tr>
		<td><input name="ic" type="checkbox" value="九阳"  /></td>
		<td>JavaScript权威</td>
		<td>59</td>
		<td>8</td>
	    </tr>
	    <tr>
		<td colspan="4" style="text-align:left; font-weight:bold; padding-left:15px;">删除选中的书</td>
	    </tr>
	</table>

    </body>
</html>
